<template>
  <div class="min-w-[1000px] bg-gray-200">
    <nav class="bg-gray-800">
      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="flex h-16 items-center justify-between">
          <div class="flex items-center">
            <div class="shrink-0">
              <img
                class="size-8"
                src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&amp;shade=500"
                alt="Your Company"
              />
            </div>
            <!-- <div class="ml-10 flex items-baseline space-x-4">
              <a
                href="#"
                class="bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium"
                aria-current="page"
                x-state:on="Current"
                x-state:off="Default"
                x-state-description='Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white"'
                >Dashboard</a
              >
              <a
                href="#"
                class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium"
                x-state-description='undefined: "bg-gray-900 text-white", undefined: "text-gray-300 hover:bg-gray-700 hover:text-white"'
                >Team</a
              >
              <a
                href="#"
                class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium"
                x-state-description='undefined: "bg-gray-900 text-white", undefined: "text-gray-300 hover:bg-gray-700 hover:text-white"'
                >Projects</a
              >
              <a
                href="#"
                class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium"
                x-state-description='undefined: "bg-gray-900 text-white", undefined: "text-gray-300 hover:bg-gray-700 hover:text-white"'
                >Calendar</a
              >
              <a
                href="#"
                class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium"
                x-state-description='undefined: "bg-gray-900 text-white", undefined: "text-gray-300 hover:bg-gray-700 hover:text-white"'
                >Reports</a
              >
            </div> -->
          </div>
          <div class="ml-4 flex items-center md:ml-6">
            <button
              type="button"
              class="relative rounded-full bg-gray-800 text-gray-400 hover:text-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden"
            >
              <CommonIcon class="!text-2xl align-bottom" name="SolarBellOutline" />
            </button>
            <!-- Profile dropdown -->
            <div class="relative ml-3">
              <div>
                <button
                  type="button"
                  class="relative flex max-w-xs items-center rounded-full bg-gray-800 text-sm focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden"
                >
                  <img
                    class="size-8 rounded-full"
                    src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80"
                    alt=""
                  />
                </button>
              </div>
              <div
                class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 ring-1 shadow-lg ring-black/5 focus:outline-hidden hidden"
              >
                <a class="block px-4 py-2 text-sm text-gray-700">Your Profile</a>
                <a class="block px-4 py-2 text-sm text-gray-700">Settings</a>
                <a class="block px-4 py-2 text-sm text-gray-700">Sign out</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>
    <header>
      <div class="mx-auto w-[1000px] py-6 flex justify-between text-white select-none">
        <div class="flex items-center justify-around gap-4 bg-[#009933] rounded p-6">
          <span>正在考试</span>
          <CommonIcon class="!text-2xl" name="MaterialSymbolsArrowRightAltRounded" />
        </div>

        <div class="flex items-center justify-around gap-4 bg-[#00cccc] rounded p-6">
          <span>模拟考试</span>
          <CommonIcon class="!text-2xl" name="MaterialSymbolsShowChartRounded" />
        </div>
        <div class="flex items-center justify-around gap-4 bg-[#0066cc] rounded p-6">
          <span>每日一测</span>
          <CommonIcon class="!text-2xl" name="MaterialSymbolsCalendarMonth" />
        </div>
        <div class="flex items-center justify-around gap-4 bg-[#00ccff] rounded p-6">
          <span>顺序练习</span>
          <CommonIcon class="!text-2xl" name="MaterialSymbolsChangeCircleOutlineRounded" />
        </div>
        <div class="flex items-center justify-around gap-4 bg-[#00ccff] rounded p-6">
          <span>分类练习</span>
          <CommonIcon class="!text-2xl" name="MaterialSymbolsScatterPlot" />
        </div>
      </div>
    </header>
    <main>
      <div class="bg-white shadow w-[1000px] mx-auto p-8">123</div>
    </main>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss"></style>
